<template>
    <!-- 角色积分 -->
    <div class="app-container">
        <!-- 搜索工具栏 -->
        <section>
            <so-tool-bar :toolData="toolData" :query="listQuery" @search="search" />
        </section>
        <!-- 其他操作 -->
        <section class="filter-container">
            <el-row>
                <el-col :span="5">
                    <el-button type="primary" @click="effect(1)">生效</el-button>
                    <el-button type="primary" plain @click="effect(0)">取消</el-button>
                </el-col>
            </el-row>
        </section>
        <!-- 表格数据 -->
        <el-table :data="tableList" v-loading="loading" element-loading-text="正在查询中。。。" stripe highlight-current-row @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" align="center" width="50">
            </el-table-column>
            <el-table-column prop="role_name" align="center" label="角色">
            </el-table-column>
            <el-table-column prop="canlike_nums" align="center" label="可点赞数/月">
            </el-table-column>
            <el-table-column align="center" prop="integraltype_name" label="积分类别">
                <template slot-scope="{row}">
                    {{cacheTypeList[row.integraltype_id]}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="score" label="分数">
            </el-table-column>
            <el-table-column align="center" prop="like_describe" label="描述" show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center" label="生效" width="100">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.switch" active-color="#13ce66" inactive-color="#C0C4CC" @change="switchChange(scope.row,$event)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="100">
                <template slot-scope="scope">
                    <i class="iconfont ali-edit-2" @click="openEdit(scope.row)"></i>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <section>
            <so-pagination :query="listQuery" @initList="initList" />
        </section>
        <!-- 编辑模态框 -->
        <section>
            <el-dialog title="编辑" :visible.sync="editForm.show" width="35%">
                <el-form :model="editForm" ref="editForm" label-width="100px">
                    <el-form-item label="可点赞数/月" prop="canlike_nums" :rules="filter_rules({required:true})">
                        <el-input clearable style="width: 300px;" placeholder="请输入分数" v-model.number="editForm.canlike_nums">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="积分类别" prop="integraltype_id" :rules="filter_rules({required:true})">
                        <el-select clearable style="width:300px;" v-model="editForm.integraltype_id" placeholder="请选择">
                            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分数" prop="score" :rules="filter_rules({required:true, type: 'integer'})">
                        <el-input clearable style="width: 300px;" placeholder="请输入分数" v-model.number="editForm.score">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="描述" prop="score" :rules="filter_rules({required:true, type: 'integer'})">
                        <el-input clearable type="textarea" style="width: 300px;" placeholder="请输入" v-model="editForm.like_describe">
                        </el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editForm.show = false">取 消</el-button>
                    <el-button type="primary" @click="validate('editForm')">确 定</el-button>
                </span>
            </el-dialog>
        </section>
    </div>
</template>
<script>
import { role_list, role_edit, role_updateEffectStatus, role_save } from '@/api/role'
import { integraltype_listAll } from '@/api/integraltype'
import { searchTool } from '@/utils'
import SoPagination from '@/components/SoPagination'
import SoToolBar from "@/components/SoToolBar";
import roleInte from "./roleInte";

export default {
    components: { SoPagination, SoToolBar },
    data() {
        return {
            toolData: [], //工具栏初始化
            loading: false,
            tableList: [],
            multipleSelection: [],
            typeList: [],
            listQuery: { start: 0, limit: 10, total: 0, current: 1 },
            editForm: { show: false },
            cacheTypeList: {}
        }
    },
    methods: {
        async editRole() {
            this.loading = true;
            const { data } = await role_edit(this.editForm)
            this.loading = false;
            if (data.status == 100) {
                this.$message.success("操作成功")
            }
            this.initList();
        },
        validate(e) {
            this.$refs[e].validate(valid => {
                if (valid) {
                    this.editRole();
                    this.editForm.show = false;
                } else {
                    return false;
                }
            });
        },
        async effect(e) {//1 生效 0 取消
            if (this.multipleSelection.length == 0) {
                this.$message.warning('请先选择需要调整单元');
                return;
            }
            const ids = this.multipleSelection.map(item => item.id).join();
            this.loading = true;
            const { data } = await role_updateEffectStatus({ ids: ids, effect_status: e });
            this.loading = false;
            if (data.status === 100) {
                await this.initList();
                this.$message.success('操作成功');
            }
        },
        async switchChange(row, e) {//
            const params = { ...row, effect_status: ~~e }//取消内存引用问题
            this.loading = true;
            await role_edit(params)
            this.loading = false;
            this.initList();
        },
        search() {//搜索
            this.listQuery = searchTool(this.listQuery);
            this.initList();
        },
        handleSelectionChange(e) {//
            this.multipleSelection = e;
        },
        async initTypeList() {//初始化 积分类别
            const { data } = await integraltype_listAll({ company_id: localStorage.getItem('companyId') });
            this.typeList = data.data.rows.map( item => {
                this.cacheTypeList[item.id] = item.integraltype_name
                return {value: item.id, label: item.integraltype_name}
            })
        },
        async initToolData() {//初始化 搜索工具栏
            this.toolData = await roleInte.getToolData();
        },
        async initList() {
            this.loading = true
            const query = { ...this.listQuery, company_id: localStorage.getItem('companyId') - 0 };
            let { data } = await role_list(query);
            this.loading = false
            if (data.status == 100) {
                this.tableList = data.data.rows.map(item => {
                    return { ...item, switch: !!item.effect_status }
                })
                this.listQuery.total = data.data.results;
            }
        },
        openEdit(scopeRow) {
            this.editForm = { show: true, ...scopeRow }
        }
    },
    created() {
        this.initList()
        this.initTypeList();
        this.initToolData();
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.ali-edit-2 {
    cursor: pointer;
    color: #e6a23d;
}

.ali-bin {
    cursor: pointer;
    color: #f56c6c;
}

.dialog-table {
    padding-top: 20px;
}
</style>


